<template>
    <view class="page-category">
        <category-bar v-model="cid" :top="current.top"></category-bar>

        <swiper :current="index" class="container" @change="onSwiperChange">
            <swiper-item v-for="(item, index) in list" :key="index">
                <scroll-view
                    class="scroller"
                    scroll-y
                    :upper-threshold="-30"
                    :lower-threshold="100"
                    :scroll-top="item.scrollTop"
                    @scroll="onScroll"
                    @scrolltoupper="onscrolltoupper"
                    @scrolltolower="onscrolltolower"
                >
                    <!-- 背景 -->
                    <view class="bg">
                        <image :src="item.backgroundUrl" />
                    </view>

                    <!-- 前3 -->
                    <top-list :list="item.topList" :type="category"></top-list>

                    <!-- 筛选 -->
                    <filter-bar
                        type="category"
                        :ref="`filter-bar-${item.cid}`"
                        @sort-change="onSortChange"
                    />

                    <view class="goods-list">
                        <goods-item
                            v-for="(item2, index2) in item.data"
                            :key="index2"
                            :item="item2"
                            :index="index2 + 3"
                            :type="category"
                        ></goods-item>

                        <cl-loadmore
                            background-color="#f7f7f7"
                            :divider="false"
                            :loading="item.loading"
                            :finish="item.finished"
                            v-if="item.data.length"
                        ></cl-loadmore>

                        <view class="empty" v-if="item.data.length == 0">
                            <image src="@/static/images/empty-goods.png" />
                            <text>暂无商品</text>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>

        <!-- 回到顶部 -->
        <view class="back-top" @tap="backTop" v-if="current.top > 667">
            <text class="iconfont icon-huidaodingbu"></text>
        </view>

        <!-- 红包 -->
        <view class="popup-red-package">
            <popup-red-package ref="popup-red-package"></popup-red-package>
        </view>

        <!-- 分享 -->
        <share-popup ref="share-popup"></share-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';

import CategoryBar from './components/category-bar';
import GoodsItem from './components/goods-item';
import RedPackage from '@/mixins/red-package';
import PopupRedPackage from './components/red-package';
import FilterBar from './components/filter-bar';
import TopList from './components/top-list';
import SharePopup from './components/share';
import Share from '@/mixins/share';

export default {
    components: {
        CategoryBar,
        GoodsItem,
        PopupRedPackage,
        FilterBar,
        TopList,
        SharePopup
    },

    mixins: [Share, RedPackage],

    data() {
        return {
            cid: null,
            topList: [],
            list: [],
            scrollTop: 0,
            category: ''
        };
    },

    computed: {
        ...mapGetters(['conf', 'userInfo']),

        categoryList() {
            return this.conf.floorList || [];
        },

        index() {
            return this.list.findIndex(e => e.cid == this.cid) || 0;
        },

        current() {
            return this.list.find(e => e.cid == this.cid);
        }
    },

    watch: {
        cid(val) {
            const statis = this.categoryList.find(item => item.floorId == val);
            this.category = statis.id;
            this.enterStatis();
        }
    },

    onLoad(options) {
        if (options.category) {
            this.cid = Number(options.category);
        }

        this.$store.dispatch('getConf').then(res => {
            this.list = res.floorList.map(e => {
                return {
                    pagination: {
                        page: 1,
                        size: 20
                    },
                    loading: false,
                    finished: false,
                    params: {},
                    data: [],
                    topList: [],
                    cid: e.floorId,
                    backgroundUrl: e.backgroundUrl,
                    top: 0,
                    scrollTop: 0
                };
            });

            this.refresh({
                cid: this.cid
            });
        });
    },

    onHide() {
        this.outStatis();
        // uni.reportAnalytics('background_list', {});
    },

    methods: {
        refresh(params) {
            const item = this.list.find(e => e.cid == this.cid) || {};
            Object.assign(item.params, params);

            let data = {
                ...item.pagination,
                ...item.params
            };

            if (data.page == 1) {
                item.data = [];
                uni.showLoading({
                    title: '加载中'
                });
            }

            item.loading = true;

            this.$service.wxjlj
                .page(data)
                .then(res => {
                    if (data.page == 1) {
                        item.data = res.list;
                    } else {
                        item.data.push(...res.list);
                    }

                    item.finished = item.data.length === res.pagination.total;
                    item.pagination = res.pagination;
                    item.topList = res.topList;

                    uni.hideLoading();
                    item.loading = false;
                })
                .catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    });

                    uni.hideLoading();
                    item.loading = false;
                });
        },

        onscrolltolower() {
            const item = this.list.find(e => e.cid == this.cid) || {};

            if (!item.finished) {
                this.refresh({
                    page: item.pagination.page + 1
                });
            }
        },

        onscrolltoupper() {
            this.refresh({ page: 1 });
        },

        onScroll(e) {
            const item = this.list.find(e => e.cid == this.cid);
            item.top = e.detail.scrollTop;
        },

        onSwiperChange(e) {
            const item = this.list[e.detail.current];
            this.cid = item.cid;

            if (item.data.length == 0) {
                this.refresh({
                    cid: this.cid,
                    page: 1,
                    order: '',
                    sort: ''
                });
            }
        },

        onSortChange({ prop, order }) {
            if (prop == 'defNum') {
                uni.reportAnalytics('click_category_xl', {});
            } else if (prop == 'endPrice') {
                uni.reportAnalytics('click_category_jg', {});
            } else if (prop == '') {
                uni.reportAnalytics('click_category_zh', {});
            }

            this.refresh({
                order: prop,
                sort: order,
                page: 1
            });
        },

        // 进入页面事件统计
        enterStatis() {
            switch (this.category) {
                case '127':
                    uni.reportAnalytics('click_clothine', {});
                    break;
                case '128':
                    uni.reportAnalytics('click_babytoys', {});
                    break;
                case '129':
                    uni.reportAnalytics('click_makeups', {});
                    break;
                case '130':
                    uni.reportAnalytics('click_homelife', {});
                    break;
                case '131':
                    uni.reportAnalytics('click_luggage', {});
                    break;
                case '132':
                    uni.reportAnalytics('click_gourmet', {});
                    break;
                case '133':
                    uni.reportAnalytics('click_style', {});
                    break;
                case '134':
                    uni.reportAnalytics('click_digital', {});
                    break;
            }
        },

        // 离开页面事件
        outStatis() {
            switch (this.category) {
                case '127':
                    uni.reportAnalytics('background_clothine', {});
                    break;
                case '128':
                    uni.reportAnalytics('background_babytoys', {});
                    break;
                case '129':
                    uni.reportAnalytics('background_makeups', {});
                    break;
                case '130':
                    uni.reportAnalytics('background_homelife', {});
                    break;
                case '131':
                    uni.reportAnalytics('background_luggage', {});
                    break;
                case '132':
                    uni.reportAnalytics('background_gourmet', {});
                    break;
                case '133':
                    uni.reportAnalytics('background_style', {});
                    break;
                case '134':
                    uni.reportAnalytics('background_digital', {});
                    break;
            }
        },

        backTop() {
            let item = this.list.find(e => e.cid == this.cid);
            item.scrollTop = 1;
            this.$nextTick(() => {
                item.scrollTop = 0;
            });
        }
    }
};
</script>

<style lang="scss">
page {
    background-color: #f7f7f7;
    height: 100%;
    overflow: hidden;
}
</style>

<style lang="scss" scoped>
.popup-red-package {
    /deep/.cl-popup {
        background-color: transparent;
        overflow: visible;

        &__container {
            padding: 0;
        }
    }

    /deep/.cl-countdown__number {
        background-color: transparent !important;
        margin: 0 !important;
        padding: 0;
        font-size: 22rpx;
        border-radius: 10rpx;
    }
}

.page-category {
    position: relative;
    height: 100%;
    overflow: hidden;

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block;

        image {
            height: 1020rpx;
            width: 100%;
        }
    }

    .container {
        height: 100%;

        .scroller {
            height: 100%;
        }
    }

    .goods-list {
        position: relative;
        padding: 20rpx 0;

        .empty {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                height: 302rpx;
                width: 410rpx;
                margin-top: 150rpx;
            }

            text {
                font-size: 26rpx;
                color: #999;
            }
        }
    }

    .back-top {
        position: fixed;
        right: 30rpx;
        bottom: 150rpx;
        z-index: 99;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 100rpx;
        height: 80rpx;
        width: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #eee;

        .iconfont {
            font-size: 40rpx;
        }
    }
}
</style>
